<template>
  <div class="swiper">
    <div class="bg" :style="{ backgroundImage: `url(${imageUrl})` }"></div>
    <el-carousel :interval="4000" height="285px" @change="changimg">
      <el-carousel-item v-for="(item, index) in swiper" :key="index">
        <a :href="item.url">
          <img :src="item.imageUrl" alt="" />
        </a>
      </el-carousel-item>
      <div class="down">
        <a href="javascript:;" class="down-img"></a>
        <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
      </div>
    </el-carousel>
    
  </div>
</template>

<script>
export default {
  name: "RecommendSwiper",
  data() {
    return {
      imageUrl: ''
        // "http://p1.music.126.net/nVmuqlYnOCr1WaN1DSw_-Q==/109951166636349401.jpg",
    };
  },
  props: {
    swiper: {
      type: Array,
      default() {
        return [];
      },
    },
    swiperImg: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  created() {
    // this.getImg()
    this.imageUrl = this.$store.state.swiperImg[0]
   
   
  },
  methods: {
    changimg(pre) {
      this.imageUrl = this.swiperImg[pre];
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  // height: 100%;
  //  filter: blur(30px);
  height: 285px;
  width: 100%;
  position: relative;
  overflow: hidden;
  .bg {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    // background: chartreuse;
    // background-image: url("http://p1.music.126.net/nVmuqlYnOCr1WaN1DSw_-Q==/109951166636349401.jpg");
    background-size: 100% 100%;
    filter: blur(30px);
  }
  .el-carousel {
    // height: 100%;
    position: relative;
    width: 1100px;
    margin: auto;
    .el-carousel__item {
      height: 100%;
      width: 730px;
      position: absolute;
      left: 57px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .down {
    position: absolute;
    top: 0;
    right: 59px;
    width: 254px;
    height: 285px;
    // background-color: black;
    background: url("https://s2.music.126.net/style/web2/img/index/download.png?93433e3c8bc7d1eba0e7caecb1e9ca91")
      no-repeat 0 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    justify-content: end;
    .down-img {
      display: block;
      width: 215px;
      height: 56px;
      margin: 186px 0 0 19px;
      background-position: 0 9999px;
      text-indent: -9999px;
      &:hover {
        cursor: pointer;
      }
      // background: url('https://s2.music.126.net/style/web2/img/index/download.png?93433e3c8bc7d1eba0e7caecb1e9ca91') no-repeat 0 0;
    }
    p {
      font-size: 12px;
      width: 254px;
      height: 16px;
      margin: 10px 0 18px;
      color: #8d8d8d;
      text-align: center;
      
    }
  }
  }
  
}
</style>